@import '@influxdata/clockface/dist/variables.scss';
@import '~src/notebooks/NotebookVariables.scss';

$notebook-minimap--left-gutter: $cf-marg-d;
$notebook-minimap--collapsed: $cf-marg-d + $cf-marg-a;
$notebook-minimap--item-padding: $cf-marg-b;

.notebook-minimap,
.notebook-minimap__collapsed {
  border-right: $cf-border solid $notebook-divider-color;
}

.notebook-minimap {
  flex: 0 0 $notebook-minimap--expanded;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.notebook-minimap--scroll {
  flex: 1 0 0;
}

.notebook-minimap__collapsed {
  flex: 0 0 ($notebook-minimap--collapsed + $notebook-minimap--left-gutter);
}

.notebook-minimap--header {
  margin-left: $notebook-minimap--left-gutter;
  display: flex;
  align-items: center;
  justify-content: center;
  height: $cf-marg-d + $cf-marg-c;
  border: none;
  border-bottom: $cf-border solid $notebook-divider-color;
  margin-bottom: $cf-marg-b;
  background-color: transparent;
  outline: none;
  color: $g15-platinum;
  transition: color 0.25s ease, background-color 0.25s ease;
  padding: 0 $notebook-minimap--item-padding;

  &:hover {
    color: $g20-white;
    background-color: $g2-kevlar;
    cursor: pointer;
  }

  .notebook-minimap__collapsed & {
    padding: 0;
    width: $notebook-minimap--collapsed;
  }
}

.notebook-minimap--title {
  font-family: $cf-text-font;
  font-size: 14px;
  font-weight: $cf-font-weight--medium;
  user-select: none;
  flex: 1 0 0;
  text-align: left;
  margin: 0;
}

.notebook-minimap--icon {
  opacity: 0.5;
  font-size: 1.125em;
}

.notebook-minimap--list {
  padding-left: $notebook-minimap--left-gutter;
  padding-right: $cf-marg-b;
}

.notebook-minimap--item {
  font-size: 14px;
  font-weight: $cf-font-weight--medium;
  color: $g11-sidewalk;
  transition: color 0.25s ease, background-color 0.25s ease;
  margin-bottom: $cf-border;
  height: $cf-marg-d;
  line-height: $cf-marg-d;
  padding: 0 $notebook-minimap--item-padding;
  border-radius: $cf-radius;
  user-select: none;

  &:hover {
    cursor: pointer;
  }
}

.notebook-minimap--item__hidden {
  color: $g8-storm;
  font-style: italic;
}

.notebook-minimap--item:hover,
.notebook-minimap--item__focus {
  color: $g18-cloud;
  background-color: $g3-castle;
}
